<template>
	<a-spin :spinning="loading">
		<a-card>
			平台信息
			<a-tabs @change="getChangeTab" style="background: #fff; padding: 0px 16px 8px 16px;" :animated="false"
				v-model="tabs">

				<a-tab-pane key="1" tab="联系我们"></a-tab-pane>
				<a-tab-pane key="2" tab="关于我们"></a-tab-pane>
				<a-tab-pane key="3" tab="功能介绍"></a-tab-pane>
				<a-tab-pane key="4" tab="法律申明"></a-tab-pane>
				<a-tab-pane key="5" tab="平台协议"></a-tab-pane>
				<a-tab-pane key="6" tab="用户协议"></a-tab-pane>
				<a-tab-pane key="7" tab="隐私协议"></a-tab-pane>
				<a-tab-pane key="8" tab="萌宠保险"></a-tab-pane>
				<a-tab-pane key="10" tab="狗证办理"></a-tab-pane>
				<a-tab-pane key="11" tab="公益活动"></a-tab-pane>
				<a-tab-pane key="12" tab="我的保单"></a-tab-pane>
				<a-tab-pane key="13" tab="就医预约"></a-tab-pane>
				<a-tab-pane key="14" tab="理赔服务"></a-tab-pane>
				<a-tab-pane key="15" tab="健康会员"></a-tab-pane>
			</a-tabs>
			<div v-if="tabs == '1'">
				<a-row :gutter="10">
					<a-col :span="12">
						<span class="label">联系电话：</span>
						<a-input :max-length="100" allow-clear v-model="phone" placeholder="请输入联系电话" />
					</a-col>
				</a-row>
				<a-row :gutter="10">
					<a-col :span="12">
						<span class="label">邮箱：</span>
						<a-input :max-length="100" allow-clear v-model="mail" placeholder="请输入邮箱" />
					</a-col>
				</a-row>
				<a-row :gutter="10">
					<a-col :span="12">
						<span class="label">网址：</span>
						<a-input :max-length="100" allow-clear v-model="url" placeholder="请输入网址" />
					</a-col>
				</a-row>
			</div>
			<div v-if="tabs == '2'">
				<a-row :gutter="10">
					<a-col :span="12">
						<span class="label">logo：</span>
						<PreviewImage v-model="logo" :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
							:show-upload="formgetFileLength(`logo`) < 1"
							@uploadSuccess="formuploadSuccess($event, `logo`)" />
					</a-col>
				</a-row>
				<a-row :gutter="10">
					<a-col :span="12">
						<span class="label">版本号：</span>
						<a-input :max-length="100" allow-clear v-model="version" placeholder="请输入版本号" />
					</a-col>
				</a-row>
				<a-row :gutter="10">
					<a-col :span="12">
						<span class="label">网址：</span>
						<a-input :max-length="100" allow-clear v-model="webUrl" placeholder="请输入网址" />
					</a-col>
				</a-row>
			</div>
			<div v-if="tabs == '3'">
				<a-row :gutter="24">
					<a-col :span="24">
						<quill-editor class='editor' v-model="content" ref="myQuillEditor" :options="editorOption"
							@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"
							@ready="onEditorReady($event)">
						</quill-editor>
					</a-col>
				</a-row>

			</div>
			<div v-if="tabs == '4'">
				<a-row :gutter="24">
					<a-col :span="24">
						<quill-editor class='editor' v-model="content" ref="myQuillEditor" :options="editorOption"
							@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"
							@ready="onEditorReady($event)">
						</quill-editor>
					</a-col>
				</a-row>

			</div>
			<div v-if="tabs == '5'">
				<a-row :gutter="24">
					<a-col :span="24">
						<quill-editor class='editor' v-model="content" ref="myQuillEditor" :options="editorOption"
							@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"
							@ready="onEditorReady($event)">
						</quill-editor>
					</a-col>
				</a-row>

			</div>
			<div v-if="tabs == '6'">
				<a-row :gutter="24">
					<a-col :span="24">
						<quill-editor class='editor' v-model="content" ref="myQuillEditor" :options="editorOption"
							@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"
							@ready="onEditorReady($event)">
						</quill-editor>
					</a-col>
				</a-row>

			</div>
			<div v-if="tabs == '7'">
				<a-row :gutter="24">
					<a-col :span="24">
						<quill-editor class='editor' v-model="content" ref="myQuillEditor" :options="editorOption"
							@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"
							@ready="onEditorReady($event)">
						</quill-editor>
					</a-col>
				</a-row>

			</div>

			<div v-if="tabs == '8'||tabs == '10'||tabs==11||tabs==12||tabs==13||tabs==14||tabs==15">
				<a-row :gutter="24">
					<a-col :span="24">
						<quill-editor class='editor' v-model="content" ref="myQuillEditor" :options="editorOption"
							@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"
							@ready="onEditorReady($event)">
						</quill-editor>
					</a-col>
				</a-row>

			</div>



			<a-row :gutter="10">
				<a-col :span="10">
					<a-button class="ml-18" type="primary" @click="getSave">保存</a-button>
				</a-col>
			</a-row>
		</a-card>
	</a-spin>
</template>
<script>
	import {
		quillEditor
	} from 'vue-quill-editor'
	import {
		platformInfo,
		platformCreate,
		platformUpdate
	} from '@/api'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import {
		get
	} from 'lodash'
	export default {
		components: {
			quillEditor
		},
		data() {
			return {
				loading: false,
				tabs: 1,
				isShow: true,
				phone: '',
				mail: '',
				url: '',
				logo: [],
				content: "<p>Hello World!</p>",
				version: '',
				webUrl: '',
				id: '',
				editorOption: {
					placeholder: '请输入',
					theme: "snow",
					modules: {
						toolbar: {
							container: [
								['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
								['blockquote', 'code-block'], // 引用  代码块
								[{
									header: 1
								}, {
									header: 2
								}], // 1、2 级标题
								[{
									list: 'ordered'
								}, {
									list: 'bullet'
								}], // 有序、无序列表
								[{
									script: 'sub'
								}, {
									script: 'super'
								}], // 上标/下标
								[{
									indent: '-1'
								}, {
									indent: '+1'
								}], // 缩进
								// [{ direction: 'rtl' }], // 文本方向
								[{
									size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']
								}], // 字体大小
								[{
									header: [1, 2, 3, 4, 5, 6]
								}], // 标题
								[{
									color: []
								}, {
									background: []
								}], // 字体颜色、字体背景颜色
								// [{ font: ['songti'] }], // 字体种类
								[{
									align: []
								}], // 对齐方式
								['clean'], // 清除文本格式
								['image'] // 链接、图片，需要视频的可以加上video
							]

						}
					}
				}
			}
		},
		computed: {

		},
		watch: {

		},
		async created() {
			this.getChangeTab(1)
		},
		methods: {
			getChangeTab(e) {
				this.tabs = e
				platformInfo({
					type: e
				}).then(res => {
					if (res) {
						this.id = res.id
						if (e == 1) {

							let data = JSON.parse(res.content)
							this.phone = data.phone
							this.mail = data.mail
							this.url = data.url
						} else if (e == 2) {
							let data = JSON.parse(res.content)
							this.version = data.version
							this.webUrl = data.webUrl
							this.logo = [data.logo]
						} else {
							this.content = res.content
						}
					} else {
						this.id = ''
						this.content = ''
					}
				})
			},
			// 失去焦点事件
			onEditorBlur(quill) {
				console.log('editor blur!', quill)
			},
			// 获得焦点事件
			onEditorFocus(quill) {
				console.log('editor focus!', quill)
			},
			// 准备富文本编辑器
			onEditorReady(quill) {
				console.log('editor ready!', quill)
			},
			// 内容改变事件，只需要这一个方法就够了
			onEditorChange({
				quill,
				html,
				text
			}) {
				this.content = html
			},
			formgetFileLength(type) { //获取图片
				return get(this.logo, 'length') || 0
			},
			formuploadSuccess(data, type) {
				this.logo = [data.path]
			},
			getSave() {
				let data = {
					type: this.tabs
				}
				if (this.tabs == 1) {
					data.content = JSON.stringify({
						phone: this.phone,
						mail: this.mail,
						url: this.url
					})

				} else if (this.tabs == 2) {
					data.content = JSON.stringify({
						version: this.version,
						webUrl: this.webUrl,
						logo: this.logo.toString()
					})
				} else {
					data.content = this.content
				}
				if (this.id) {
					data.id = this.id
				}
				
				platformCreate(data)
					.then(() => {
						this.$message.success(this.id ? '修改成功！' : '新增成功！')
						this.$emit('upload')
						this.cancel()
						this.getChangeTab(this.tabs)
					})
					.finally(() => {
						this.loading = false
					})
			}
		}
	}
</script>
<style lang="less" scoped>
	.ant-col {
		margin-bottom: 20px;
		display: flex;
		align-items: center;

		.label {
			flex-shrink: 0;
			width: 86px;
			text-align: right;
			font-size: 14px;
			color: #595959;
		}

		.w-full {
			flex: 1;
		}
	}
</style>